บทท 4 ใส และตกแต งข อความบนเว บเพจ

Transcription

1 บทท 4 ใส และตกแต งข อความบนเว บเพจ เว บเพจสามารถนาเสนอข อม ลหลากหลายร ปแบบ ไม ว าจะเป นข อความ ตาราง ร ปภาพ เส ยง ภาพเคล อนไหว และม ลต ม เด ยต าง ๆ แต ข อม ลพ นฐานท สาค ญท ส ดก ค อข อความ ด งน น ในบทน เราจะ พ ดถ งการใส และจ ดร ปแบบข อความบนเว บเพจก นก อน ใส ข อความลงบนเว บเพจ การใส ข อความลงบนเว บเพจสามารถทาได เหม อนก บในโปรแกรมประเภทเว ร ดโปรเซสเซอร ท วไปค อเร มจากคล กเพ อวางเคอร เซอร ตรงจ ดท ต องการแล วพ มพ ข อความ นอกจากน นสามารถ จ ดร ปแบบของข อความแต ละส วนให แตกต างก นตามความสาค ญหร อประเภทของเน อหา เช น ข อความ ท วไป,ห วเร อง (heading) และข อความท ต องการเน น เป นต น 1.คล กวางเคอร เซอร ร ปท 2.44 แสดงการใส ข อความลงบนเว บเพจ 2.พ มพ ข อความ สามารถใช เทคน คการเล อนเคอร เซอร,การเล อก และการแก ไขข อความได เหม อนก บใน โปรแกรมเว ร ดโปรเซสเซอร เช นเด ยวก น ต วอย างเช น ย ายข อความ ทาได โดยเล อกข อความ แล วคล กลากไปวางท ตาแหน งใหม ย ายข อความ (อ กว ธ ) เล อกข อความ แล วใช คาส ง Edit > Cut (ค ย ล ด Ctrl+X) จากน นวาง เคอร เซอร ตรงตาแหน งปลายทาง แล วใช คาส ง Edit > Paste (ค ย ล ด Ctrl+V ) ก อปป ข อความ ทาได โดยเล อกข อความ แล วกดค ย Ctrl ค างไว พร อมก บคล กลากไปวางท ใหม ก อปป ข อความ (อ กว ธ ) เล อกข อความ แล วใช คาส ง Edit > Cut (ค ย ล ด Ctrl+X)จากน นวาง เคอร เซอร ตรงตาแหน งปลายทาง แล วใช คาส ง Edit > Paste (ค ย ล ด Ctrl+V )

2 เว นวรรคระหว างข อความ กดค ย Ctrl+Shift+Space (แทนการเคาะ Space เฉย ๆ) ท พาเนล Insert ให คล กแท บ Text จากน นคล กร ป Non-BreakingSpace เพ อใส ต วเว นวรรค (หน า Characters) แล วเล อก 1.ในพาเนล Insert เล อกแท บ Text 2.คล ก แล วเล อกคาส ง Non-Breaking Space ร ปท 2.45 แสดงข นตอนการเว นวรรคระหว างข อความ ข นบรรท ดใหม ในย อหน าเด ม เม อพ มพ ข อความจนเต มบรรท ดหร อเต มความกว างของขอบเขตตรงจ ดน น (เช นในช องตาราง) โปรแกรมจะป ดข อความข นบรรท ดใหม อ ตโนม ต ถ ากดค ย Enter จะถ อว าเป นการข นย อหน าใหม ซ ง ระยะบรรท ดจะห างกว าปกต แต ถ าต องการป ดข อความข นบรรท ดใหม เอง (ในย อหน าเด ม) ก ทาได 2 ว ธ ค อ กดค ย Shift + Enter ท พาเนล Insert ให คล กแท บ Text จากน นคล กร ป (หน า Characters) แล วเล อก Line Break (Shift + Enter) เพ อข นบรรท ดใหม ร ปท 2.46 แสดงข นตอนข นบรรท ดใหม ในย อหน าเด ม

3 จ ดร ปแบบข อความ ร ปแบบข อความในท น หมายถ งฟอนต,ขนาด,ส,ล กษณะต วหนา-ต วเอ ยง ตลอดจนการจ ด ตาแหน งและค ณสมบ ต ของย อหน าภายในเว บเพจ สามารถเล อกใช คาส งจ ดร ปแบบข อความได หลายว ธ ด วยก น เช น ใช เคร องม อบนพาเนล Properties, ใช คาส งในแท บ Text บนพาเนล Insert และใช เมน ล ด จากการคล กขวา เป นต น แต ในหน งส อเล มน จะเน นท การใช พาเนล Properties เป นหล กเน องจากเป นว ธ ท สะดวกท ส ด จ ดร ปแบบข อความด วยพาเนล Properties เคร องม อสาหร บจ ดร ปแบบข อความในพาเนล Properties แบ งออกเป น 2 ร ปแบบหล ก ๆ ด งน จ ดร ปแบบด วย HTML เป นการเร ยกใช คาส งจากแท กของ HTML เพ อเข าส โหมด html ก อนแล วคล กกาหนดคาส ง ต งแต เวอร ช น CS4 เป นต นมา ได ยกเล กการจ ดร ปแบบด วย html แบบเด มหลาย ๆ คาส งออกไป โดย สน บสน นให จ ดร ปแบบด วย CSS แทนมากข น ร ปท 2.47 แสดงคาส งท ใช จ ดร ปแบบด วย HTML จ ดร ปแบบด วย CSS เป นการจ ดร ปแบบด วยสไตล โดยท กคร งท ม การคล กคาส งใด ๆ โปรแกรมจะให สร างสไตล CSS ใหม เสมอ แต หากต องการใช สไตล ท สร างไว แล วก สามารถคล กเล อกท ช อง Targeted Rule ได ร ปท 2.48 แสดงคาส งท ใช จ ดร ปแบบด วย CSS

4 จ ดร ปแบบข อความด วย CSS ในเวอร ช นน ได ปร บล กษณะการจ ดร ปแบบต าง ๆ ให ไปใช สไตล CSS มากข น โดยไม ว าจะ จ ดร ปแบบอะไรก ตามโปรแกรมจะให ค ณเก บไว เป นสไตล CSS ก อนเสมอ ซ งข อด ค อควบค มร ปแบบ ต วอ กษรส วนต าง ๆ ได ง าย (ไม ต องใช แท ก html), แก ไขได ท จ ดเด ยวและไฟล เว บเพจม ขนาดเล กข อเส ย ค อย งยากในข นตอนของการสร าง ส าหร บบทน จะกล าวถ ง CSS ท ใช จ ดร ปแบบข อความเท าน นส วน เน อหาเร องการจ ดการและการสร าง CSS อย างละเอ ยดให ด เพ มเต มได ในบทท 06 สร างช ดฟอนต ต วอ กษร โปรแกรมได เตร ยมช ดฟอนต ต วอ กษรไว ให แล วบางส วน ซ งถ าสร างเว บเพจภาษาอ งกฤษก สามารถใช ได ท นท แต ถ าเป นเว บเพจภาษาไทยควรสร างช ดฟอนต ภาษาไทยเพ ม ซ งทาได ด งน 1. คล กท CSS 2. คล ก แล วเล อก Edit Font List. 3. คล กเล อกฟอนต ท ต องการใช 4. คล กเพ อเพ มฟอนต เข าไปในช ด 5. (ถ าต องการ) ทาซ าข นท 3-4 เพ อเพ มฟอนต อ นอ กตามลาด บ 6. คล ก OK ร ปท 2.49 การสร างช ดฟอนต ต วอ กษร

5 กาหนดช ดฟอนต ให ก บข อความ บนเว บเพจ สามารถเล อกใช ฟอนต ได หลายฟอนต ก บข อความท อนเด ยวก น ด งน นการกาหนด ฟอนต จ งเป นการเล อกช ดฟอนต (แทนท จะเล อกเพ ยงฟอนต ใดฟอนต หน ง) แต ฟอนต ท ถ กใช จร งจะ ข นอย ก บเคร องของผ ชมด วย เม อเล อกฟอนต แล วโปรแกรมก จะให บ นท กร ปแบบท เล อกไว เพ อนามาใช ได ก บข อความส วนอ น ๆ ในเว บต อไป 1. เล อกข อความท จะกาหนดช ดฟอนต 2. คล ก แล วเล อกช ดฟอนต ท ต องการ 3. ต งช อ Class 4. คล ก OK ร ปท 2.50 การกาหนดช ดฟอนต ให ก บข อความ

6 กาหนดขนาดต วอ กษร ทาได โดยเล อกสไตล ท บ นท กในช อง Targeted Rule แล วกาหนดขนาดต วอ กษรท ต องการ แต หากเล อกแบบ <New CSS Rule> จะม หน าต างให บ นท กช อร ปแบบท กาหนดไว 1.เล อกข อความท จะกาหนดขนาด 3.เล อกขนาด 4.คล กแล วเล อกหน วย 2.เล อกสไตล ท ต องการแก ไข ร ปท 2.51 การกาหนดขนาดต วอ กษร ข อควรร เก ยวก บขนาดต วอ กษร ถ าไม กาหนดขนาดต วอ กษร (ค อปล อยให ช อง Size ม ค าเป น None) การแสดงผลใน บราวเซอร จะข นก บการกาหนดค า Size ในหมวด Appearance ของ Page Properties และถ าใน Page Properties ก ไม ได กาหนดไว การแสดงผลจะข นอย ก บการต งค าในบราวเซอร ของผ ชม การกาหนดขนาดต วอ กษรทาได 2 ว ธ ว ธ แรกค อกาหนดเป นค าต วเลขพร อมระบ หน วยซ งจะ ทาให ได ขนาดต วอ กษรคงท แน นอน (ยกเว นหน วย%) ว ธ ท 2 ค อกาหนดเป นค าส มพ นธ เท ยบก บ ต วอ กษรปกต ค อต งแต xx-small ถ ง xx-large รวมท ง smaller และ larger ผลของขนาดต วอ กษรย งข นอย ก บโปรแกรมบราวเซอร และประเภทของฟอนต ท เล อกใช อ ก ด วยด งน นในบางกรณ ผลล พธ อาจไม เป นไปตามท คาดก ได

7 กาหนดส ต วอ กษร การกาหนดส ต วอ กษร หากกาหนดไว ในหมวด Appearance (CSS) ท หน า Page Properties จะม ผลก บข อความท งเว บเพจแต หากต องการกาหนดส เฉพาะข อความบางส วนให ทาได โดย 1. เล อกข อความท จะกาหนดส 2. คล ก <New CSS Rule> 3. คล ก แล วคล กเล อกส จากตารางส (หร อพ มพ รห สส ลงในช องแล วกดค ย Enter เช น #FF0000 ค อส แดง) 4. เล อก Class (can apply ) 5. กาหนดช อคลาส 6. คล ก OK ร ปท 2.52 การกาหนดส ต วอ กษร

8 จ ดย อหน าข อความ หมายถ ง การจ ดตาแหน งโดยให ข อความท งหมดในย อหน าน นอย ช ดซ าย ก งกลาง ช ดขวา หร อ ให ด านซ ายและด านขวาตรงแนวก น (เท ยบก บหน าเว บเพจหร อขอบเขตตรงจ ดน น) ซ งทาได ด งน จ ดร ปแบบข อความด วย HTML เป นการจ ดร ปแบบแท ก HTML โดยเม อเราเล อกจ ดร ปแบบใด ๆ โปรแกรมก จะใส แท ก น น ๆ ลงไปในโค ดท ละจ ดให เลย ซ งแตกต างจากร ปแบบของ CSS ค อไม ต องบ นท กร ปแบบท กาหนดเอาไว ได แต หากในหน าเว บน นม การใช ร ปแบบเด มซ า ๆ ก น ก อาจเส ยเวลาในการเล อกร ปแบบใหม ท กคร ง และการแก ไขก จะต องทาท ละจ ด ด งน นต งแต เวอร ช น CS4 จนถ ง CS5 จ งสน บสน นให จ ดร ปแบบด วย CSS มากข น ใช ร ปแบบห วเร องของ HTML ร ปแบบห วเร องของ HTML (ช อง format บนพาเนล Properties) ใช สาหร บจ ดร ปแบบข อความ ท เป นห วเร องระด บต าง ๆ ได อย างรวดเร วโดยจะม ผลก บข อความท งย อหน าเสมอ กาหนดล กษณะต วหนา ต วเอ ยง และอ นๆ การกาหนดล กษณะต วหนาและต วเอ ยงของต วอ กษรทาได โดยเล อกข อความ แล วคล กป ม หร อ บนพาเนล Properties (ถ าต องการยกเล กก คล กซ าอ กคร ง) นอกจากน ย งกาหนดล กษณะอ น ๆ ของต วอ กษรได โดยเล อกคาส ง Format > Style > เล อก สไตล ซ งผลของสไตล เหล าน จะข นก บบราวเซอร แต ละต ว และการต งค าของผ ชมด วย ยกเว นสไตล พ นฐานด านล างน ท ม กจะเหม อนก น จ ดเย องย อหน า เป นการจ ดให ย อหน าข อความเย องไปทางขวาหร อร นย อนกล บมาทางซ ายท ละ 1 ช วง (แต จะ ไม ร นไปทางซ ายเก นกว าตาแหน งเร มต น) แทรกเส นแบ งเน อหา สามารถแทรกเส นแนวนอนสาหร บค นหร อแบ งเน อหาภายในเว บเพจได ด งน 1. คล กตรงจ ดท จะแทรก 2. เล อกคาส ง Insert > HTML> Horizontal Rule 3. กาหนดค ณสมบ ต ต าง ๆ ของเส น

9 กาหนดส เส น สามารถกาหนดส ให ก บเส นแบ งได แต ค ณสมบ ต น จะแสดงผลได บนบางบราวเซอร เท าน น 1. คล กขวาบนเส นแบ ง แล วเล อกคาส ง Edit Tag <hr> 2. คล กเล อกหมวด Browser Specific 3. คล ก แล วเล อกส 4. คล ก OK 5. กด เพ อด ผลล พธ ก อปป เน อหาจากโปรแกรมอ น สามารถก อปป ข อความหร อเน อหาท อย ในไฟล เอกสารประเภท เช น Word, Excel รวมท งไฟล ของโปรแกรมอ น ๆ เข ามาวางบนเว บเพจได โดยว ธ วางทาได 2 แบบค อ วางด วยคาส ง Edit > Paste (ค ย ล ด Ctrl+V) ซ งตามปกต ข อความจะถ กวางพร อมก บร ปแบบ พ นฐาน เช น ล กษณะต วหนา,ต วเอ ยง (ถ าม การกาหนดไว ในโปรแกรมต นฉบ บ) วางด วยคาส ง Edit > Paste Special (ค ย ล ด Ctrl+Shift+V) ซ งจะปร บแต งออปช นของคาส ง ได ท นท เหมาะจะใช ก บข อความท ม การจ ดร ปแบบไว แล ว เช น ขนาด/ส ต วอ กษร,ห วข อบ คเล ต,ร ปภาพ รวมท งตารางและร ปแบบท ใช จ ดตารางโดย Dreamweaver จะนาค ณสมบ ต ด งกล าวมาสร างเป นสไตล CSS เพ อจ ดร ปแบบเน อหาท วางบนเว บเพจให ใกล เค ยงก นโดยอ ตโนม ต ก อปป ข อความจาก MS-Word 1. เป ดไฟล เอกสาร Word แล วเล อกข อความหร อเน อหาท ต องการ 2. คล กขวาบนข อความแล วเล อกคาส ง Copy 3. กล บมาท Dreamweaver วางเคอร เซอร บนเว บเพจแล วเล อกคาส ง Edit > Paste Special 4. กาหนดออปช นในการวางเน อหาท ก อปป มา 5. คล ก OK

10 2. คล กขวาบนข อความ แล วเล อกคาส ง Copy 3. กล บมาท Dreamweaver วางเคอร เซอร บนเว บเพจแล วเล อกคาส ง Edit > Paste Special 1. เป ดไฟล เอกสาร Word แล วเล อกข อความหร อ เน อหาท ต องการ 4. กาหนดออปช น ในการวางเน อหา ท ก อปป มา 5. คล ก OK ร ปท 3.53 ข นตอนก อปป ข อความจาก MS-Word

11 ออปช นในการวางข อความ Text only วางเฉพาะข อความอย างเด ยวโดยไม ม การจ ดร ปแบบใด ๆ Text with structure (paragraphs,lists,tables,etc.) วางข อความตามโครงสร างต นฉบ บ เช น การจ ดย อหน า,บ คเล ต,ตาราง และอ น ๆ Text with structure plus basic formatting (bold,italic) วางข อความตามโครงสร างต นฉบ บ และนาเอาร ปแบบพ นฐานของข อความมาใช ด วย เช น ล กษณะต วหนา ต วเอ ยง เป นต น Text with structure plus full formatting (bold,italic, styles) วางข อความตามโครงสร าง ต นฉบ บและนาร ปแบบท กอย างมาใช ด วย เช น ล กษณะต วหนา ต วเอ ยง และสไตล ท ใช จ ดข อความ Retain line breaks ให คงล กษณะการแบ งบรรท ดไว ตามต นฉบ บ Clean up Word paragraph spacing ให ล างค าระยะห างระหว างย อหน าท กาหนดไว ใน Word ออกด วย ก อปป ตารางจาก MS-Excel 1. เป ดไฟล เอกสาร Excel แล วเล อกกล มเซลท ต องการ 2. คล กขวาบนกล มเซลแล วเล อกคาส ง Copy 3.กล บมาท Dreamweaver วางเคอร เซอร บนเว บเพจแล วเล อกคาส ง Edit > Paste Special 4. กาหนดออปช นในการวางเน อหาท ก อปป มา 5. คล ก OK